<!--
 * @Description: 用户任务配置表单
 * @Author: DHL
 * @Date: 2022-08-04 10:41:36
 * @LastEditors: DHL
 * @LastEditTime: 2022-11-19 19:50:57
-->
<template>
  <tw-drawer
    v-model="modelVisible"
    title="审批人设置"
    size="700px"
    appendToBody
    @close="handleClose"
  >
    <div class="user-task-form-wrapper">
      <div class="title">审批类型</div>
      <el-radio-group size="large" v-model="state.category" style="width: 100%">
        <el-radio label="manualApproval">人工审批</el-radio>
        <el-radio label="autoBypass">自动通过</el-radio>
        <el-radio label="autoByreject">自动拒绝</el-radio>
      </el-radio-group>
      <el-divider />

      <!-- 审批规则 -->
      <template v-if="state.category === 'manualApproval'">
        <el-tabs v-model="activeTabsName" size="large">
          <el-tab-pane label="设置审批人" name="setUpApprover">
            <el-radio-group
              size="large"
              v-model="state.assignedRules.type"
              @change="handleChangeRulesType"
            >
              <el-radio label="specified">指定成员</el-radio>
              <el-radio label="optional">发起人自选</el-radio>
              <el-radio label="continuousMultistage">
                连续多级主管
                <hint content="发起人向上的各级主管依次审批"></hint>
              </el-radio>
              <!-- <el-radio label="departmentHead">部门主管</el-radio> -->
              <el-radio label="supervisor">
                直属主管
                <hint content="发起人向上的各级主管依次审批"></hint>
              </el-radio>
              <!-- <el-radio label="role">角色</el-radio> -->
              <el-radio label="initiator">发起人自己</el-radio>
            </el-radio-group>
            <el-divider />

            <!-- 配置审批人 -->
            <div>
              <!-- 指定成员 -->
              <template v-if="state.assignedRules.type === 'specified'">
                <el-button type="primary" size="default" class="ls" @click="handleSelectUserOpen">
                  <svg-icon
                    :iconClass="state.assignedRules.assigneeList.length === 0 ? 'plus' : 'edit'"
                  ></svg-icon>
                  {{ state.assignedRules.assigneeList.length === 0 ? '添加成员' : '修改成员' }}
                </el-button>

                <div class="user-list" v-if="state.assignedRules.assigneeList.length > 0">
                  <el-tag
                    v-for="user in state.assignedRules.assigneeList"
                    :key="user.id"
                    class="ls"
                    size="large"
                    closable
                    @close="handleDeleteUser(user)"
                  >
                    {{ user.name }}
                  </el-tag>

                  <el-button type="danger" link @click="handleClearUser">清空</el-button>
                </div>
              </template>

              <!-- 发起人自选 -->
              <template v-if="state.assignedRules.type === 'optional'">
                <el-select v-model="state.assignedRules.optionalWay" placeholder="">
                  <el-option label="自选一个人" value="one" />
                  <el-option label="自选多个人" value="more" />
                </el-select>
              </template>

              <!-- 连续多级主管 -->
              <template v-if="state.assignedRules.type === 'continuousMultistage'">
                <div>
                  <el-select v-model="state.assignedRules.postId" placeholder="请选择岗位">
                    <el-option
                      v-for="item in postList"
                      :key="item.id"
                      :label="item.name"
                      :value="item.id"
                    />
                  </el-select>
                </div>
                <div class="continuousMultistage_level">
                  <el-checkbox v-model="state.assignedRules.levelChecked" label="1" size="large">
                    同时不超过发起人向上的
                  </el-checkbox>
                  <el-select v-model="state.assignedRules.level" placeholder="请选择层级">
                    <tw-dic dicKey="FLOW_RULE_LEVEL"></tw-dic>
                  </el-select>
                </div>
              </template>

              <!-- 直属主管 -->
              <template v-if="state.assignedRules.type === 'supervisor'">
                <span class="txt-1">发起人的</span>
                <el-select v-model="state.assignedRules.level" placeholder="请选择层级">
                  <tw-dic dicKey="FLOW_RULE_LEVEL"></tw-dic>
                </el-select>
              </template>
            </div>

            <!-- 多人审批方式 -->
            <template v-if="multiWayShow">
              <div class="approval-setting">
                <el-divider />
                <div class="title">多人审批时采用的审批方式</div>

                <el-radio-group size="large" v-model="state.multiInstanceRules.approvalWay">
                  <el-radio label="sequential">依次审批</el-radio>
                  <el-radio label="parallel">会签（须所有审批人同意）</el-radio>
                  <el-radio label="orSign">或签（一名审批人同意或拒绝即可）</el-radio>
                </el-radio-group>
              </div>
            </template>

            <!-- 审批人为空 -->
            <template v-if="userNullShow">
              <div class="approval-setting">
                <el-divider />
                <div class="title">审批人为空时</div>

                <el-radio-group size="large" v-model="state.approvalWay">
                  <el-radio label="autoBypass">
                    自动通过
                    <hint content="当该主管没有人的时候，审批单将自动通过"></hint>
                  </el-radio>
                  <el-radio label="parallel">
                    自动转交管理员
                    <hint
                      content="当主管为空时，审批单会自动转交给管理员（默认转交模板管理员，如果没有模板管理员转给审批管理员）"
                    ></hint>
                  </el-radio>
                  <el-radio label="orSign">
                    指定人员审批
                    <hint content="当主管为空时，审批单会自动转交给指定成员"></hint>
                  </el-radio>
                </el-radio-group>
              </div>
            </template>
          </el-tab-pane>

          <el-tab-pane label="表单操作权限" name="formPermissions">表单操作权限</el-tab-pane>
          <el-tab-pane label="高级设置" name="advancedSettings">高级设置</el-tab-pane>
        </el-tabs>
      </template>
    </div>

    <template #footer>
      <el-button @click="handleClose()">取 消</el-button>
      <el-button type="primary" @click="handleSubmit()"> 保 存 </el-button>
    </template>

    <selectUser ref="selectUserRef" @submit="handleSubmitSelectUser"></selectUser>
  </tw-drawer>
</template>

<script src="./userTaskForm.ts"></script>

<style scoped lang="scss">
  .user-task-form-wrapper {
    padding: 20px;

    :deep(.el-tabs) {
      .el-tabs__item {
        font-size: 14px;
      }
    }

    .el-radio {
      width: 150px;
    }

    .el-divider {
      margin-top: 0px;
    }

    .ls {
      letter-spacing: 2px;
    }

    .title {
      padding-bottom: 10px;
    }

    .txt-1 {
      font-size: 14px;
      margin-right: 15px;
    }

    // 用户集合显示
    .user-list {
      margin-top: 10px;

      .el-tag {
        margin: 0px 10px 10px 0px;
      }
    }

    // 连续多级主管
    .continuousMultistage_level {
      margin-top: 10px;

      .el-select {
        margin-left: 15px;
      }
    }

    .approval-setting {
      margin-top: 25px;

      .el-radio-group {
        display: grid;
      }
    }
  }
</style>
